<template>
  <template v-if="inventoryUnSaleableReq.info&&inventoryUnSaleableReq.info.length>0">
    <el-carousel-item v-for=" (item, index) in inventoryUnSaleableReq.info" :key="index">
    <card-box>
      <template v-slot:title>
        <h1>{{ inventoryUnSaleableReq.title }}</h1>
      </template>
      <InventoryUnSaleableTable class="unSaleableTable" v-if="inventoryUnSaleableReq.info&&inventoryUnSaleableReq.info.length>0" :chart-data="item" />
    </card-box>
    </el-carousel-item>
  </template>
  <template v-else>
    <el-carousel-item>
    <card-box>
      <template v-slot:title>
        <h1>{{ inventoryUnSaleableReq.title }}</h1>
      </template>
      <div class="default-img">
        <p>{{ $t('bi_common_nodata') }}</p>
      </div>
    </card-box>
    </el-carousel-item>
  </template>  
</template>

<script setup lang="ts">
// 呆滞库存
import { storeToRefs } from 'pinia'
import { onMounted, reactive, ref, watch } from 'vue'
import { headersStore } from '@/stores/apiHeader'
import { useSupplyStore } from '@/stores/module/supply'
import InventoryUnSaleableTable from '@/components/Echart/Table/inventoryUnSaleableTable.vue'
const supplyStore = useSupplyStore()
const headerStore = headersStore()
const { inventoryUnSaleableReq } = storeToRefs(supplyStore) //接口数据
const { month } = storeToRefs(headerStore) //header数据
const refilterData = ()=>{}
onMounted(()=>{
  refilterData()
})
watch(
  () => inventoryUnSaleableReq.value,
  () => {
    refilterData()
  },
  { deep: true }
)
</script>

<style>
.unSaleableTable{
  width: 100%;
  height: 250px;
}
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;
  font-size: 16px;
  color: #00f6ff;
}
</style>